<template>
  <div>
    <p>FullName: {{fullName}}</p>
    <p>FirstName: <input type="text" v-model="firstName"></p>
    <p>obj.a: {{obj.a}}</p>
    <p>obj.a: <input type="text" v-model="obj.a"></p>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-button @click="clickMe('1', 29, 'lili')">点我就给你防抖</el-button>
  </div>
</template>

<script>
// import { _debounce } from '@/utils/common'
import { _throttle } from '@/utils/common'
export default {
  data() {
    return {
      firstName: 'Dawei',
      lastName: 'Lou',
      fullName: '',
      obj: {
        a: 123
      },
      input: ''
    }
  },
  mounted() {
    this.obj = {
      a: '456'
    }
  },
  watch: {
    firstName: {
      handler(newName) {
        this.fullName = newName + ' ' + this.lastName
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },
    // 性能消耗
    obj: {
      handler() {
        // console.log('obj.a changed', newName, oldName);
      },
      immediate: true
    }
  },
  methods: {
    mockAjax: (content, age, name) => {
      console.log('ajax request ' + content + " " + age + " " + name)
    },
    clickMe() {
    // clickMe(content, age, name) {
      // debounce(this.mockAjax, 1000, '1', 29)
      this.changefield('1', 29, 'lili')
      // _throttle(this.mockAjax(content, age, name), 10000)
    },
    // 通过防抖节流来控制快速操作的情况
    changefield: _throttle(function(...args) {
      console.log(args)
      // do something ...，执行的方法
      // this.mockAjax(content, age, name)
    }, 10000)
  }
}
</script>

<style>

</style>